<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
	<title>雪碧图做的一个loading效果</title>
	<style type="text/css">
		html,
		body,
		#loaderContainer{
			width: 100%;
			height: 100%;
			margin: 0px;
			padding: 0px;
			box-sizing: border-box;
		}
		#loaderContainer{
			position: absolute;
			top: 0px;
			left: 0px;
			bottom: 0px;
			right: 0px;
			margin: auto;
			width: 81px;
			height: 38px;
			display: flex;
		}
		#loaderContainer>div{
			width: 27px;
			height: 38px;
		}
		#loaderContainer>#decade{
			background: url(img/loadNum.png) no-repeat;
			background-position: 27px 0px;
		}
		#loaderContainer>#unit{
			background: url(img/loadNum.png) no-repeat;
		}
		#loaderContainer>#hund{
			background: url(img/loadNum.png) no-repeat;
			background-position: 27px 0px;
		}
		#loaderContainer:after{
			content: url(img/loadPc.png);
			width: 27px;
			height: 38px;
			position: absolute;
			right: -27px;
			top: 0px;
		}
	</style>
</head>
<body>
	<div id="loaderContainer">
		<div id="hund"></div>
		<div id="decade"></div>
		<div id="unit"></div>
	</div>
	<script type="text/javascript">
		var decade = document.getElementById("decade");
		var unit = document.getElementById("unit");
		var hund = document.getElementById("hund");
		var positionXY = ["0px 0px","-101px 0px","-24px -40px","-25px 0px","-76px 0px","-48px -38px","-74px -38px","-99px -38px","3px -38px","-51px 0px"];

		function percent(nums){
			var x = Math.floor(nums/10)==10?0:Math.floor(nums/10); //十位数
			var y = nums % 10;			//个位数
			var z = Math.floor(nums/100);		//百位数
			setPosition(decade,x);
			setPosition(unit,y);
			setPosition(hund,z);
		}

		function setPosition(dom,num){
			dom.style.backgroundPosition = positionXY[num];
		}
		function progress(callback){
				var num = 0;
				if(typeof callback !== "function"){
					throw "last params is not a function!";
				}
				addNum = function(max){
					var inter = setInterval(function(){
						if(num<max){
							num++;
							showAhide(num);
						}else{
							clearInterval(inter);
						}
						callback(num);
					},200);
				}
				return function(last){
					addNum(last);
				}
			}
		function showAhide(num){
			decade.style.visibility="visible";
			hund.style.visibility="visible";
			if(num<10){
				decade.style.visibility="hidden";
				hund.style.visibility="hidden";
			}
			if(num>=10 && num<100){
				hund.style.visibility="hidden";
			}
		}
		var step = 0;
		var result = progress(function(data){
				percent(data);
			});
		var loadTestInterval = setInterval(function(){
			step+=10;
			if(step>=100){
				step=100;
				window.clearInterval(loadTestInterval);
			}
			result(step);
		},1000);
	</script>
</body>
</html>